<template>
  <div class="home">
   <!-- 轮播组件 -->
   <mt-swipe :auto="4000" class="swiper">
      <mt-swipe-item v-for="(img,index) in imgList " :key="index">
        <img :src="img" alt="">
      </mt-swipe-item>
   </mt-swipe>

   <!-- 导航nav -->
   <div>
     <ul class="nav-box">
       <li class="nav-item" @click="jumpTo('newsList')">
         <i><img src="../assets/imgs/menu01.png" alt=""></i>
         <p>新闻资讯</p>
       </li>
       <li class="nav-item" @click="jumpTo('imgList')">
         <i><img src="../assets/imgs/menu02.png" alt=""></i>
         <p>图片分享</p>
       </li>
       <li class="nav-item"  @click="jumpTo('goodsList')">
         <i><img src="../assets/imgs/menu03.png" alt=""></i>
         <p>商品购买</p>
       </li>
       <li class="nav-item">
         <i><img src="../assets/imgs/menu04.png" alt=""></i>
         <p>留言反馈</p>
       </li>
       <li class="nav-item">
         <i><img src="../assets/imgs/menu05.png" alt=""></i>
         <p>视频专区</p>
       </li>
       <li class="nav-item">
         <i><img src="../assets/imgs/menu06.png" alt=""></i>
         <p>反馈我们</p>
       </li>
     </ul>
   </div>

   <!-- 底部导航 -->
   <Tab-Bar></Tab-Bar>
  </div>
</template>

<script>
// 引入已封装好的底部TabBar组件
import TabBar from '@/components/TabBar'

export default {
  data () {
    return {
      // 轮播图片
      imgList: [
        'http://m.itcast.cn/images/newslide/homepageandphone/20181528141522828.jpg',
        'http://m.itcast.cn/images/newslide/homepageandphone/20180918170957294.jpg',
        'http://m.itcast.cn/images/newslide/homepageandphone/20184827134845878.jpg'
      ]
    }
  },
  /* 注入需使用组件 */
  components: {
    TabBar
  },
  methods: {
    /* 导航栏相应页面跳转 */
    jumpTo (urlName) {
      this.$router.push({ name: urlName })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .swiper {
    height: 205px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .nav-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    .nav-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.33%;
      margin: 10px 0;
      cursor: pointer;
      p {
        font-size: 20px;
      }
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
}
</style>
